<template>
  <div>
    <t-image
      class="target-image"
      :src="imageUrl"
      shape="round"
      :style="{
        width: '100%',
        aspectRatio: computedAspectRatio,
        borderRadius: '6px',
      }"
      fit="fill"
    >
      <template #loading>
        <img
          :src="imgload"
          style="
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          "
        />
      </template>
      <template #error>
        <img
          :src="imgload"
          style="
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          "
        />
      </template>
    </t-image>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick, computed } from "vue";
import comicApi from "@/api/comicApi";
import imgload from "@/assets/imgload.png";
import logo from "@/assets/logo.png";
import { ossImageToBase64 } from "@/utils/ossImageToBase64.js";

const props = defineProps({
  url: {
    type: String,
  },
  record: {
    type: Object,
  },
  aspectRatiodate: {
    type: [String, Number], // 支持字符串（如 '1 / 1.42'）或数字（如 0.704）
    required: false, // 非必传，用默认值兜底
    default: "1 / 1.42",
  },
});

const imageUrl = ref("");
const isCollect = ref(false);

// 批量处理图片列表（返回数组，用于多张图片场景）
const handleCourseImageList = async (imageUrlList = [], mimeType = "webp") => {
  // 防御：处理空数组或非数组
  if (!Array.isArray(imageUrlList) || imageUrlList.length === 0) {
    console.warn("[批量图片处理] 无效的 URL 列表：", imageUrlList);
    return [];
  }
  try {
    const result = await ossImageToBase64(imageUrlList, { mimeType });
    // 提取处理结果（成功返回 Base64，失败返回兜底 URL）
    return result.list.map((item) => (item.success ? item.data : item.data));
  } catch (err) {
    console.error("[批量图片处理] 失败：", err);
    return imageUrlList; // 异常时返回原始列表兜底
  }
};

// 处理单张图片（核心修复：从数组取第一个元素）
const handleSingleImage = async () => {
  // 1. 确保传入 handleCourseImageList 的是数组（因为 props.url 是单个字符串）
  const urlList = props.url ? [props.url] : [];
  // 2. 调用批量处理函数，拿到数组结果
  const processedList = await handleCourseImageList(urlList, "webp");
  // 3. 取数组第一个元素（单张图片的 URL/Base64），用占位图兜底
  imageUrl.value = processedList[0] || imgload;
  // 验证：确保是字符串（避免极端情况）
  if (typeof imageUrl.value !== "string") {
    imageUrl.value = imgload;
  }
};
// 2. 计算属性：处理 props.aspectRatiodate，确保格式合法
const computedAspectRatio = computed(() => {
  const { aspectRatiodate } = props;

  // 情况1：若传递的是数字（如 0.704，对应 1/1.42），直接转为字符串格式 '数字'
  if (typeof aspectRatiodate === "number") {
    // 保留 3 位小数，避免数字过长（可选，根据需求调整）
    return aspectRatiodate.toFixed(3);
  }

  // 情况2：若传递的是字符串，校验是否符合 'x / y' 格式（如 '1 / 1.42'、'4 / 3'）
  if (typeof aspectRatiodate === "string") {
    // 正则校验：匹配 '数字 / 数字' 格式（支持整数和小数）
    const ratioReg = /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/;
    if (ratioReg.test(aspectRatiodate)) {
      return aspectRatiodate; // 格式合法，直接使用
    } else {
      // 格式非法（如 '1:1.42'、'1.42'），用默认值兜底，并在控制台提示
      console.warn(
        `aspectRatiodate 格式错误（${aspectRatiodate}），已自动使用默认值 '1 / 1.42'`
      );
      return "1 / 1.42";
    }
  }
  return "1 / 1.42";
});

onMounted(() => {
  handleSingleImage();
});
</script>

<style lang="scss" scoped>
.imgbox {
  position: relative;

  .heart {
    position: absolute;
    right: 3px;
    bottom: 3px;
  }
}

.imgbox {
  position: relative;

  .heart {
    position: absolute;
    right: 3px;
    bottom: 3px;
  }
}

.overbox {
  position: absolute;
  right: 3px;
  top: 3px;

  .text {
    font-size: 10px;
    color: #ff5959;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #fff;
    font-weight: 700;
  }
}
.img-tu {
  width: 100%;
  height: 152px;
}
</style>
